<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4875661" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">3.1关闭</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">3.1选择</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">3.1选中</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">3.1已关注店铺</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">3.1首页-选中</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">3.1首页</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">3.1我的-选中</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">3.1我的</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">线上链接</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e1;</span>
                <div class="name">链接</div>
                <div class="code-name">&amp;#xe8e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">链接</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">已勾选32</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">未勾选32</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">链接</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c7;</span>
                <div class="name">网站链接</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">自定义</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">背景图片</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe775;</span>
                <div class="name">自定义</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">自定义</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">个性化</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">图片 </div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb6a;</span>
                <div class="name">自定义</div>
                <div class="code-name">&amp;#xeb6a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">view</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">view_off</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">order</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">order_unread</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">region</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">notification</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">notification_off</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">image</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">email</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">international</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">refresh</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">close_filled</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">check_filled</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">forbidden</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">info_filled</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">help_filled</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">like_filled</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">star</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">star_filled</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">arrow_up</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">arrow_left</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">arrow_down</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">arrow_right</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">page_first</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">down_to_bottom</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">up_to_top</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">page_last</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">page_turning_left</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">page_turning_right</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">show_less</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">show_more</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">social_sina</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">social_google</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">social_naver</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">social_stackflow</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">social_youtube</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">social_github</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">social_twitter</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">applets</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">social_wechat</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">go-to-link</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">benefits</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">alipay</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">taobao</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">书签栏图标</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">自定义</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ba;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe8ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">自定义</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7de;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe7de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">我的定制</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">显示书签栏</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1743492955637') format('woff'),
       url('iconfont.ttf?t=1743492955637') format('truetype'),
       url('iconfont.svg?t=1743492955637#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-31guanbi"></span>
            <div class="name">
              3.1关闭
            </div>
            <div class="code-name">.icon-31guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31xuanze"></span>
            <div class="name">
              3.1选择
            </div>
            <div class="code-name">.icon-31xuanze
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31xuanzhong"></span>
            <div class="name">
              3.1选中
            </div>
            <div class="code-name">.icon-31xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31yiguanzhudianpu"></span>
            <div class="name">
              3.1已关注店铺
            </div>
            <div class="code-name">.icon-31yiguanzhudianpu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31shouyexuanzhong"></span>
            <div class="name">
              3.1首页-选中
            </div>
            <div class="code-name">.icon-31shouyexuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31shouye"></span>
            <div class="name">
              3.1首页
            </div>
            <div class="code-name">.icon-31shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31wodexuanzhong"></span>
            <div class="name">
              3.1我的-选中
            </div>
            <div class="code-name">.icon-31wodexuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31wode"></span>
            <div class="name">
              3.1我的
            </div>
            <div class="code-name">.icon-31wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xianshanglianjie"></span>
            <div class="name">
              线上链接
            </div>
            <div class="code-name">.icon-xianshanglianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lianjie"></span>
            <div class="name">
              链接
            </div>
            <div class="code-name">.icon-lianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lianjie-tianchong"></span>
            <div class="name">
              链接
            </div>
            <div class="code-name">.icon-lianjie-tianchong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yigouxuan"></span>
            <div class="name">
              已勾选32
            </div>
            <div class="code-name">.icon-yigouxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weigouxuan"></span>
            <div class="name">
              未勾选32
            </div>
            <div class="code-name">.icon-weigouxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lianjie1"></span>
            <div class="name">
              链接
            </div>
            <div class="code-name">.icon-lianjie1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-wangzhanlianjiehulianwang"></span>
            <div class="name">
              网站链接
            </div>
            <div class="code-name">.icon-a-wangzhanlianjiehulianwang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi1"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zidingyi11"></span>
            <div class="name">
              自定义
            </div>
            <div class="code-name">.icon-zidingyi11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-beijingtupian"></span>
            <div class="name">
              背景图片
            </div>
            <div class="code-name">.icon-beijingtupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zidingyi3"></span>
            <div class="name">
              自定义
            </div>
            <div class="code-name">.icon-zidingyi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi2"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi3"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zidingyi"></span>
            <div class="name">
              自定义
            </div>
            <div class="code-name">.icon-zidingyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              个性化
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片 
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian1"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zidingyi1"></span>
            <div class="name">
              自定义
            </div>
            <div class="code-name">.icon-zidingyi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian2"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan-"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian3"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan1"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test"></span>
            <div class="name">
              view
            </div>
            <div class="code-name">.icon-icon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test1"></span>
            <div class="name">
              view_off
            </div>
            <div class="code-name">.icon-icon-test1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test2"></span>
            <div class="name">
              order
            </div>
            <div class="code-name">.icon-icon-test2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test3"></span>
            <div class="name">
              order_unread
            </div>
            <div class="code-name">.icon-icon-test3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test4"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-icon-test4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test5"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-icon-test5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test6"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.icon-icon-test6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test7"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-icon-test7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test8"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.icon-icon-test8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test9"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.icon-icon-test9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test10"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-icon-test10
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test11"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.icon-icon-test11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test12"></span>
            <div class="name">
              region
            </div>
            <div class="code-name">.icon-icon-test12
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test13"></span>
            <div class="name">
              notification
            </div>
            <div class="code-name">.icon-icon-test13
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test14"></span>
            <div class="name">
              notification_off
            </div>
            <div class="code-name">.icon-icon-test14
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test15"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-icon-test15
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test16"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.icon-icon-test16
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test17"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.icon-icon-test17
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test18"></span>
            <div class="name">
              image
            </div>
            <div class="code-name">.icon-icon-test18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test19"></span>
            <div class="name">
              email
            </div>
            <div class="code-name">.icon-icon-test19
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test20"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.icon-icon-test20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test21"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-icon-test21
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test22"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-icon-test22
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test23"></span>
            <div class="name">
              international
            </div>
            <div class="code-name">.icon-icon-test23
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test24"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.icon-icon-test24
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test25"></span>
            <div class="name">
              close_filled
            </div>
            <div class="code-name">.icon-icon-test25
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test26"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.icon-icon-test26
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test27"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-icon-test27
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test28"></span>
            <div class="name">
              check_filled
            </div>
            <div class="code-name">.icon-icon-test28
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test29"></span>
            <div class="name">
              forbidden
            </div>
            <div class="code-name">.icon-icon-test29
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test30"></span>
            <div class="name">
              info_filled
            </div>
            <div class="code-name">.icon-icon-test30
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test31"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon-icon-test31
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test32"></span>
            <div class="name">
              help_filled
            </div>
            <div class="code-name">.icon-icon-test32
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test33"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.icon-icon-test33
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test34"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.icon-icon-test34
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test35"></span>
            <div class="name">
              like_filled
            </div>
            <div class="code-name">.icon-icon-test35
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test36"></span>
            <div class="name">
              star
            </div>
            <div class="code-name">.icon-icon-test36
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test37"></span>
            <div class="name">
              star_filled
            </div>
            <div class="code-name">.icon-icon-test37
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test38"></span>
            <div class="name">
              arrow_up
            </div>
            <div class="code-name">.icon-icon-test38
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test39"></span>
            <div class="name">
              arrow_left
            </div>
            <div class="code-name">.icon-icon-test39
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test40"></span>
            <div class="name">
              arrow_down
            </div>
            <div class="code-name">.icon-icon-test40
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test41"></span>
            <div class="name">
              arrow_right
            </div>
            <div class="code-name">.icon-icon-test41
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test42"></span>
            <div class="name">
              page_first
            </div>
            <div class="code-name">.icon-icon-test42
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test43"></span>
            <div class="name">
              down_to_bottom
            </div>
            <div class="code-name">.icon-icon-test43
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test44"></span>
            <div class="name">
              up_to_top
            </div>
            <div class="code-name">.icon-icon-test44
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test45"></span>
            <div class="name">
              page_last
            </div>
            <div class="code-name">.icon-icon-test45
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test46"></span>
            <div class="name">
              page_turning_left
            </div>
            <div class="code-name">.icon-icon-test46
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test47"></span>
            <div class="name">
              page_turning_right
            </div>
            <div class="code-name">.icon-icon-test47
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test48"></span>
            <div class="name">
              show_less
            </div>
            <div class="code-name">.icon-icon-test48
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test49"></span>
            <div class="name">
              show_more
            </div>
            <div class="code-name">.icon-icon-test49
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test50"></span>
            <div class="name">
              social_sina
            </div>
            <div class="code-name">.icon-icon-test50
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test51"></span>
            <div class="name">
              social_google
            </div>
            <div class="code-name">.icon-icon-test51
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test52"></span>
            <div class="name">
              social_naver
            </div>
            <div class="code-name">.icon-icon-test52
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test53"></span>
            <div class="name">
              social_stackflow
            </div>
            <div class="code-name">.icon-icon-test53
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test54"></span>
            <div class="name">
              social_youtube
            </div>
            <div class="code-name">.icon-icon-test54
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test55"></span>
            <div class="name">
              social_github
            </div>
            <div class="code-name">.icon-icon-test55
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test56"></span>
            <div class="name">
              social_twitter
            </div>
            <div class="code-name">.icon-icon-test56
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test57"></span>
            <div class="name">
              applets
            </div>
            <div class="code-name">.icon-icon-test57
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test58"></span>
            <div class="name">
              social_wechat
            </div>
            <div class="code-name">.icon-icon-test58
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test59"></span>
            <div class="name">
              go-to-link
            </div>
            <div class="code-name">.icon-icon-test59
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test60"></span>
            <div class="name">
              benefits
            </div>
            <div class="code-name">.icon-icon-test60
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alipay"></span>
            <div class="name">
              alipay
            </div>
            <div class="code-name">.icon-alipay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-taobao"></span>
            <div class="name">
              taobao
            </div>
            <div class="code-name">.icon-taobao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuqianlantubiao"></span>
            <div class="name">
              书签栏图标
            </div>
            <div class="code-name">.icon-shuqianlantubiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-18"></span>
            <div class="name">
              自定义
            </div>
            <div class="code-name">.icon-18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian4"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zidingyi2"></span>
            <div class="name">
              自定义
            </div>
            <div class="code-name">.icon-zidingyi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-24px"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-24px
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-046-download"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-046-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai1"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wodedingzhi"></span>
            <div class="name">
              我的定制
            </div>
            <div class="code-name">.icon-wodedingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai2"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai_xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai_xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xianshishuqianlan"></span>
            <div class="name">
              显示书签栏
            </div>
            <div class="code-name">.icon-xianshishuqianlan
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31guanbi"></use>
                </svg>
                <div class="name">3.1关闭</div>
                <div class="code-name">#icon-31guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31xuanze"></use>
                </svg>
                <div class="name">3.1选择</div>
                <div class="code-name">#icon-31xuanze</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31xuanzhong"></use>
                </svg>
                <div class="name">3.1选中</div>
                <div class="code-name">#icon-31xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31yiguanzhudianpu"></use>
                </svg>
                <div class="name">3.1已关注店铺</div>
                <div class="code-name">#icon-31yiguanzhudianpu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31shouyexuanzhong"></use>
                </svg>
                <div class="name">3.1首页-选中</div>
                <div class="code-name">#icon-31shouyexuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31shouye"></use>
                </svg>
                <div class="name">3.1首页</div>
                <div class="code-name">#icon-31shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31wodexuanzhong"></use>
                </svg>
                <div class="name">3.1我的-选中</div>
                <div class="code-name">#icon-31wodexuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31wode"></use>
                </svg>
                <div class="name">3.1我的</div>
                <div class="code-name">#icon-31wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xianshanglianjie"></use>
                </svg>
                <div class="name">线上链接</div>
                <div class="code-name">#icon-xianshanglianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lianjie"></use>
                </svg>
                <div class="name">链接</div>
                <div class="code-name">#icon-lianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lianjie-tianchong"></use>
                </svg>
                <div class="name">链接</div>
                <div class="code-name">#icon-lianjie-tianchong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yigouxuan"></use>
                </svg>
                <div class="name">已勾选32</div>
                <div class="code-name">#icon-yigouxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weigouxuan"></use>
                </svg>
                <div class="name">未勾选32</div>
                <div class="code-name">#icon-weigouxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lianjie1"></use>
                </svg>
                <div class="name">链接</div>
                <div class="code-name">#icon-lianjie1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-wangzhanlianjiehulianwang"></use>
                </svg>
                <div class="name">网站链接</div>
                <div class="code-name">#icon-a-wangzhanlianjiehulianwang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi1"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zidingyi11"></use>
                </svg>
                <div class="name">自定义</div>
                <div class="code-name">#icon-zidingyi11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-beijingtupian"></use>
                </svg>
                <div class="name">背景图片</div>
                <div class="code-name">#icon-beijingtupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zidingyi3"></use>
                </svg>
                <div class="name">自定义</div>
                <div class="code-name">#icon-zidingyi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi2"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi3"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zidingyi"></use>
                </svg>
                <div class="name">自定义</div>
                <div class="code-name">#icon-zidingyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">个性化</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片 </div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian1"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zidingyi1"></use>
                </svg>
                <div class="name">自定义</div>
                <div class="code-name">#icon-zidingyi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian2"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan-"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian3"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan1"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test"></use>
                </svg>
                <div class="name">view</div>
                <div class="code-name">#icon-icon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test1"></use>
                </svg>
                <div class="name">view_off</div>
                <div class="code-name">#icon-icon-test1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test2"></use>
                </svg>
                <div class="name">order</div>
                <div class="code-name">#icon-icon-test2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test3"></use>
                </svg>
                <div class="name">order_unread</div>
                <div class="code-name">#icon-icon-test3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test4"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-icon-test4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test5"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-icon-test5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test6"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#icon-icon-test6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test7"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-icon-test7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test8"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#icon-icon-test8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test9"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#icon-icon-test9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test10"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-icon-test10</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test11"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#icon-icon-test11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test12"></use>
                </svg>
                <div class="name">region</div>
                <div class="code-name">#icon-icon-test12</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test13"></use>
                </svg>
                <div class="name">notification</div>
                <div class="code-name">#icon-icon-test13</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test14"></use>
                </svg>
                <div class="name">notification_off</div>
                <div class="code-name">#icon-icon-test14</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test15"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-icon-test15</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test16"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#icon-icon-test16</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test17"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#icon-icon-test17</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test18"></use>
                </svg>
                <div class="name">image</div>
                <div class="code-name">#icon-icon-test18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test19"></use>
                </svg>
                <div class="name">email</div>
                <div class="code-name">#icon-icon-test19</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test20"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#icon-icon-test20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test21"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-icon-test21</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test22"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-icon-test22</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test23"></use>
                </svg>
                <div class="name">international</div>
                <div class="code-name">#icon-icon-test23</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test24"></use>
                </svg>
                <div class="name">refresh</div>
                <div class="code-name">#icon-icon-test24</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test25"></use>
                </svg>
                <div class="name">close_filled</div>
                <div class="code-name">#icon-icon-test25</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test26"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#icon-icon-test26</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test27"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-icon-test27</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test28"></use>
                </svg>
                <div class="name">check_filled</div>
                <div class="code-name">#icon-icon-test28</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test29"></use>
                </svg>
                <div class="name">forbidden</div>
                <div class="code-name">#icon-icon-test29</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test30"></use>
                </svg>
                <div class="name">info_filled</div>
                <div class="code-name">#icon-icon-test30</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test31"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#icon-icon-test31</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test32"></use>
                </svg>
                <div class="name">help_filled</div>
                <div class="code-name">#icon-icon-test32</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test33"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#icon-icon-test33</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test34"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#icon-icon-test34</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test35"></use>
                </svg>
                <div class="name">like_filled</div>
                <div class="code-name">#icon-icon-test35</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test36"></use>
                </svg>
                <div class="name">star</div>
                <div class="code-name">#icon-icon-test36</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test37"></use>
                </svg>
                <div class="name">star_filled</div>
                <div class="code-name">#icon-icon-test37</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test38"></use>
                </svg>
                <div class="name">arrow_up</div>
                <div class="code-name">#icon-icon-test38</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test39"></use>
                </svg>
                <div class="name">arrow_left</div>
                <div class="code-name">#icon-icon-test39</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test40"></use>
                </svg>
                <div class="name">arrow_down</div>
                <div class="code-name">#icon-icon-test40</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test41"></use>
                </svg>
                <div class="name">arrow_right</div>
                <div class="code-name">#icon-icon-test41</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test42"></use>
                </svg>
                <div class="name">page_first</div>
                <div class="code-name">#icon-icon-test42</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test43"></use>
                </svg>
                <div class="name">down_to_bottom</div>
                <div class="code-name">#icon-icon-test43</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test44"></use>
                </svg>
                <div class="name">up_to_top</div>
                <div class="code-name">#icon-icon-test44</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test45"></use>
                </svg>
                <div class="name">page_last</div>
                <div class="code-name">#icon-icon-test45</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test46"></use>
                </svg>
                <div class="name">page_turning_left</div>
                <div class="code-name">#icon-icon-test46</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test47"></use>
                </svg>
                <div class="name">page_turning_right</div>
                <div class="code-name">#icon-icon-test47</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test48"></use>
                </svg>
                <div class="name">show_less</div>
                <div class="code-name">#icon-icon-test48</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test49"></use>
                </svg>
                <div class="name">show_more</div>
                <div class="code-name">#icon-icon-test49</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test50"></use>
                </svg>
                <div class="name">social_sina</div>
                <div class="code-name">#icon-icon-test50</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test51"></use>
                </svg>
                <div class="name">social_google</div>
                <div class="code-name">#icon-icon-test51</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test52"></use>
                </svg>
                <div class="name">social_naver</div>
                <div class="code-name">#icon-icon-test52</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test53"></use>
                </svg>
                <div class="name">social_stackflow</div>
                <div class="code-name">#icon-icon-test53</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test54"></use>
                </svg>
                <div class="name">social_youtube</div>
                <div class="code-name">#icon-icon-test54</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test55"></use>
                </svg>
                <div class="name">social_github</div>
                <div class="code-name">#icon-icon-test55</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test56"></use>
                </svg>
                <div class="name">social_twitter</div>
                <div class="code-name">#icon-icon-test56</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test57"></use>
                </svg>
                <div class="name">applets</div>
                <div class="code-name">#icon-icon-test57</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test58"></use>
                </svg>
                <div class="name">social_wechat</div>
                <div class="code-name">#icon-icon-test58</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test59"></use>
                </svg>
                <div class="name">go-to-link</div>
                <div class="code-name">#icon-icon-test59</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test60"></use>
                </svg>
                <div class="name">benefits</div>
                <div class="code-name">#icon-icon-test60</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alipay"></use>
                </svg>
                <div class="name">alipay</div>
                <div class="code-name">#icon-alipay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-taobao"></use>
                </svg>
                <div class="name">taobao</div>
                <div class="code-name">#icon-taobao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuqianlantubiao"></use>
                </svg>
                <div class="name">书签栏图标</div>
                <div class="code-name">#icon-shuqianlantubiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-18"></use>
                </svg>
                <div class="name">自定义</div>
                <div class="code-name">#icon-18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian4"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zidingyi2"></use>
                </svg>
                <div class="name">自定义</div>
                <div class="code-name">#icon-zidingyi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-24px"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-24px</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-046-download"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-046-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai1"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wodedingzhi"></use>
                </svg>
                <div class="name">我的定制</div>
                <div class="code-name">#icon-wodedingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai2"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai_xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai_xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xianshishuqianlan"></use>
                </svg>
                <div class="name">显示书签栏</div>
                <div class="code-name">#icon-xianshishuqianlan</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
